<template>
  <div>
    <div class="UAVinspection" style="background-color: #000">
      <div class="tech-container">
        <div class="header">
          <h1 class="title-gradient">无人机道路缺陷分析</h1>
          <p class="sub-title">UAV Road Defect Analysis</p>
        </div>

        <div class="header-content">
          <div class="action-buttons">
            <el-button type="primary" icon="Upload" @click="upLoadmessage" class="export-btn"> 上传照片 </el-button>
            <el-date-picker
              v-model="dateRange"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
              @clear="handlerDateClear"
              format="YYYY/MM/DD"
              popper-class="picker-popper"
            >
              <template #default="cell">
                <div class="cell" :class="{ current: cell.isCurrent }">
                  <span class="text">{{ cell.text }}</span>
                  <span v-if="isHoliday(cell)" class="holiday" />
                </div>
              </template>
            </el-date-picker>
          </div>
          <div class="btnRightClass">
            <div class="checkBox">
              <label class="neon-checkbox">
                <input
                  type="checkbox"
                  @click.stop="allSelect"
                  :checked="taskList.length > 0 && taskList.every((item) => drawerInfoID.some((selected) => selected.id === item.id))"
                />
                <div class="neon-checkbox__frame">
                  <div class="neon-checkbox__box">
                    <div class="neon-checkbox__check-container">
                      <svg viewBox="0 0 24 24" class="neon-checkbox__check">
                        <path d="M3,12.5l7,7L21,5"></path>
                      </svg>
                    </div>
                    <div class="neon-checkbox__glow"></div>
                    <div class="neon-checkbox__borders"><span></span><span></span><span></span><span></span></div>
                  </div>
                  <div class="neon-checkbox__effects">
                    <div class="neon-checkbox__particles">
                      <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span
                      ><span></span><span></span><span></span>
                    </div>
                    <div class="neon-checkbox__rings">
                      <div class="ring"></div>
                      <div class="ring"></div>
                      <div class="ring"></div>
                    </div>
                    <div class="neon-checkbox__sparks"><span></span><span></span><span></span><span></span></div>
                  </div>
                </div>
              </label>
            </div>
            <div class="checkText">全选</div>

            <el-button type="danger" icon="Delete" @click="handleDet" class="danger-btn"> 批量删除 </el-button>
            <el-button type="primary" icon="Document" @click="handleExport" class="export-btn"> 导出报告 </el-button>
            <el-button type="primary" icon="Document" @click="logout" class="export-btn"> 退出登录 </el-button>
          </div>
        </div>

        <el-row :gutter="24" class="list-container">
          <el-col v-for="(item, index) in taskList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" class="list-item">
            <div :class="item.question == questionFlag ? 'tech-card unReady' : 'tech-card'">
              <div class="card-header">
                <div class="icon-wrapper" :style="{ backgroundColor: item.statusColor }" v-show="item.question != questionFlag">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.newImgUrl[0]"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="item.newImgUrl"
                    show-progress
                    preview-teleported
                    fit="cover"
                  />
                </div>
                <div class="icon-wrapper" :style="{ backgroundColor: item.statusColor }" v-show="item.question == questionFlag">
                  <div class="loader">
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                    <div class="loader-square"></div>
                  </div>
                </div>
                <div class="card-title" @click.prevent.stop="drawerUp(item)">
                  <h3>编号：{{ item.number }}</h3>
                  <div style="display: flex; justify-content: space-between; align-items: center; width: 100%">
                    <p class="desc">UAV可见光AI缺陷分析</p>
                    <div class="time-tag">{{ item.date }}</div>
                  </div>
                </div>
              </div>
              <div class="checkboxItem" v-show="item.question != questionFlag">
                <label class="neon-checkbox">
                  <input
                    type="checkbox"
                    @click.stop="selectBox(item.id, item.number)"
                    :checked="drawerInfoID.some((selected) => selected.id === item.id)"
                  />
                  <div class="neon-checkbox__frame">
                    <div class="neon-checkbox__box">
                      <div class="neon-checkbox__check-container">
                        <svg viewBox="0 0 24 24" class="neon-checkbox__check">
                          <path d="M3,12.5l7,7L21,5"></path>
                        </svg>
                      </div>
                      <div class="neon-checkbox__glow"></div>
                      <div class="neon-checkbox__borders"><span></span><span></span><span></span><span></span></div>
                    </div>
                    <div class="neon-checkbox__effects">
                      <div class="neon-checkbox__particles">
                        <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span
                        ><span></span><span></span><span></span>
                      </div>
                      <div class="neon-checkbox__rings">
                        <div class="ring"></div>
                        <div class="ring"></div>
                        <div class="ring"></div>
                      </div>
                      <div class="neon-checkbox__sparks"><span></span><span></span><span></span><span></span></div>
                    </div>
                  </div>
                </label>
              </div>
              <div class="status-tag" v-show="item.question == questionFlag">处理中</div>
              <div
                class="status-tag"
                @click="addDetId(item.id)"
                style="background-color: rgba(64, 158, 255, 0.2); cursor: pointer"
                v-show="item.question != questionFlag"
              >
                删 除
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="paginationBox">
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[8, 16, 32, 64]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="--el-fill-color-blank: transparent; --el-pagination-button-color: #aaa"
          />
        </div>
      </div>
      <div class="containerBG"></div>
    </div>

    <!-- 上传照片 -->
    <el-dialog v-model="dialogFormVisible" title="上传照片" width="500" modal-class="uploadUAV">
      <el-form :model="form">
        <!-- <el-form-item label="任务名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item> -->
        <el-form-item label="选择文件">
          <el-upload
            ref="uploadRef"
            v-model:file-list="form.imgIdList"
            :action="uploadImgUrl"
            :headers="headers"
            list-type="picture-card"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            multiple
            :limit="10"
            :on-exceed="handleExceed"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelsubmitImgID"> 取消 </el-button>
          <el-button :disabled="UploadImgIng" type="primary" @click="submitImgID"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <!-- 确认是否删除 -->
    <el-dialog v-model="isDet" width="500">
      <span v-if="isDetAllSelect">是否删除当前选中任务</span>
      <span v-else>是否删除当前任务</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isDet = false">取消</el-button>
          <el-button type="primary" @click="detUAVInfo">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
import { globalHeaders } from '@/utils/request';
import type { UploadInstance } from 'element-plus';
import { addUAVcheck, getUAVcheck, exportUAVcheck, deteleUAVImg, deteleUAV, getDateList } from '@/api/aiManage/UAVinspection/index';
import { ElLoading } from 'element-plus';
import useUserStore from '@/store/modules/user';

interface FormState {
  imgIdList: Array;
}
const userStore = useUserStore();
// 路由
const router = useRouter();
// 分页响应式数据
const dateRange = ref<Date>();
const holidays = ref([]);
const pageNum = ref(1);
const pageSize = ref(8);
const total = ref(400);
const taskList = ref([]);
const timer = ref(null);
const questionFlag = ref('正在分析问题中，请稍后查看!!!');

// 文件上传方法
const uploadRef = ref<UploadInstance | null>(null);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = baseUrl + '/business/img/upload';
const headers = ref(globalHeaders());
const imgIdList = ref([]);
const UploadImgIng = ref(true);

// 表单数据
const form = reactive<FormState>({
  imgIdList: []
});

// 弹窗控制
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const dialogImageUrl = ref('');

// 抽屉
const drawerInfoID = ref([]);

// 确认是否删除
const isDet = ref(false);
const isDetAllSelect = ref(false);
const isDetId = ref('');

// 分页方法
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  drawerInfoID.value = [];
  getUAVcheckList();
};

const handleCurrentChange = (newPage: number) => {
  pageNum.value = newPage;
  drawerInfoID.value = [];
  getUAVcheckList();
};

// 上传文件之前
const beforeAvatarUpload = (file: File) => {
  UploadImgIng.value = false;
  const index = file.name.lastIndexOf('.');
  const str = file.name.substr(index + 1);
  UploadImgIng.value = true;
  return ['jpg', 'png', 'jpeg'].includes(str.toLowerCase());
};

const handleAvatarSuccess = async (res: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  if (res.code == 200) {
    imgIdList.value.push(res.data);
    UploadImgIng.value = false;
  } else {
    ElMessage.error(res.msg);
    uploadFiles.splice(uploadFiles.indexOf(uploadFile), 1);
  }
};

const handleAvatarError = (err: any) => {
  UploadImgIng.value = false;
  ElMessage.error('文件上传失败');
};

const handleExceed = (files: any, fileList: any) => {
  ElMessage.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
};

const handleDateChange = (value: Date) => {
  pageNum.value = 1;
  taskList.value = [];
  getUAVcheckList();
};

const handlerDateClear = (value: Date) => {};

// 取消创建新的列表数据
const cancelsubmitImgID = () => {
  dialogFormVisible.value = false;
  uploadRef.value.clearFiles();
  imgIdList.value.forEach(async (item) => {
    const data = await deteleUAVImg(item);
    if (data.code == 200) {
      ElMessage.success('文件删除成功');
    }
  });
  imgIdList.value = [];
};

// 创建新的列表数据
const submitImgID = async () => {
  const loading = ElLoading.service({ text: '正在上传数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
  const data = await addUAVcheck({ imgIdList: imgIdList.value });
  if (data.code == 200) {
    dialogFormVisible.value = false;
    uploadRef.value.clearFiles();
    loading.close();
    imgIdList.value = [];
    getUAVcheckList();
  }
};

const getUAVcheckList = async () => {
  const formattedDate = dateRange.value; // 格式化为YYYY-MM-DD
  let params = {
    date: formattedDate,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  };
  const data = await getUAVcheck(params);
  if (data.code == 200) {
    localStorage.setItem(
      'UAVListPage',
      JSON.stringify({
        date: formattedDate,
        pageSize: pageSize.value,
        pageNum: pageNum.value
      })
    );
    taskList.value = [];
    clearInterval(timer.value);
    data.rows.forEach((item: any) => {
      item.newImgUrl = [];
      if (item.question == questionFlag.value) {
        clearInterval(timer.value);
        timer.value = setInterval(() => {
          getUAVcheckList();
        }, 3000);
        item.imgList.forEach((img: any) => {
          item.newImgUrl.push(img.imgUrl);
        });
      } else {
        item.imgList.forEach((img: any) => {
          item.newImgUrl.push(img.newImgUrl);
        });
      }
      item.date = item.date.split(' ')[0];
      taskList.value.push(item);
    });
    total.value = data.total;
  }
};

const drawerUp = async (item) => {
  if (item.question != questionFlag.value) {
    localStorage.setItem('shouldNavigate', 'true');
    localStorage.setItem('itemId', item.id);
    // 构建完整的路由路径
    const routePath = `/ai/ai/UAVinspectionInfo?id=${item.id}`;
    // 使用 window.open 在新窗口打开页面
    window.open(routePath, '_blank');
  }
};

// 修改 selectBox 方法中的判断逻辑
const selectBox = (id, number) => {
  drawerInfoID.value = drawerInfoID.value.some((item) => item.id === id)
    ? drawerInfoID.value.filter((item) => item.id !== id) // 使用 filter 创建新数组
    : [...drawerInfoID.value, { id, number }]; // 使用展开运算符添加新项
};

// 在 setup() 函数中添加工具函数
const checkValueInArray = (arr: Array<any>, key: string, value: any) => {
  return arr.some((item) => item[key] === value);
};

// 优化全选逻辑
const allSelect = () => {
  const allSelected = taskList.value.every((item) => drawerInfoID.value.some((selected) => selected.id === item.id));

  if (allSelected) {
    // 取消全选时直接清空数组
    drawerInfoID.value = [];
  } else {
    // 全选时使用展开运算符创建新数组
    drawerInfoID.value = taskList.value.map(({ id, number }) => ({ id, number }));
  }
};

const handleExport = async () => {
  if (drawerInfoID.value.length == 0) {
    ElMessage.error('当前未选中文件');
  } else {
    const loading = ElLoading.service({
      text: '正在生成报告，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    try {
      drawerInfoID.value.forEach(async (item) => {
        const response = await exportUAVcheck({ id: item.id });

        // 创建 Blob 对象并下载
        const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
        const downloadUrl = window.URL.createObjectURL(blob);

        // 创建隐藏的下载链接
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', `巡检报告_${item.number}.docx`);
        document.body.appendChild(link);
        link.click();

        // 清理资源
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
      });
    } catch (error) {
      ElMessage.error('文件导出失败');
    }
    loading.close();
  }
};

// 删除文件
const handleRemove = async (file: File): boolean => {
  const data = await deteleUAVImg(file.response.data);
  if (data.code == 200) {
    imgIdList.value.splice(imgIdList.value.indexOf(file.response.data), 1);
    return file.status !== 'uploading';
  }
};

// 批量删除
const handleDet = () => {
  if (drawerInfoID.value.length == 0) {
    ElMessage.error('当前未选中文件');
  } else {
    isDet.value = true;
    isDetAllSelect.value = true;
    isDetId.value = '';
    drawerInfoID.value.forEach((item, index) => {
      isDetId.value = isDetId.value + item.id;
      if (index < drawerInfoID.value.length - 1) {
        isDetId.value = isDetId.value + ',';
      }
    });
  }
};

// 单个删除
const addDetId = (id) => {
  isDet.value = true;
  isDetAllSelect.value = false;
  isDetId.value = id;
};

// 删除任务
const detUAVInfo = async () => {
  const data = await deteleUAV(isDetId.value);
  if (data.code == 200) {
    isDetId.value = '';
    drawerInfoID.value = [];
    isDet.value = false;
    getUAVcheckList();
  }
};

const upLoadmessage = () => {
  dialogFormVisible.value = true;
};

const handlePictureCardPreview = (uploadFile: { url: string }) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};

const logout = async () => {
  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
  let loginType = userStore.loginType ? JSON.parse(JSON.stringify(userStore.loginType)) : '';
  userStore.logout().then(() => {
    if (loginType) {
      router.replace({
        path: '/creativeProjectsLogin',
        query: {
          redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
        }
      });
    } else {
      router.replace({
        path: '/login',
        query: {
          redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
        }
      });
    }
    loginType = '';
  });
};

const clearStorage = () => {
  localStorage.removeItem('shouldNavigate');
  localStorage.removeItem('itemId');
};

const getDate = async () => {
  const data = await getDateList();
  holidays.value = data;
};

const isHoliday = ({ dayjs }) => {
  return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
};

onMounted(async () => {
  let UAVListPage = localStorage.getItem('UAVListPage');
  if (UAVListPage) {
    dateRange.value = JSON.parse(UAVListPage).date;
    pageSize.value = JSON.parse(UAVListPage).pageSize;
    pageNum.value = JSON.parse(UAVListPage).pageNum;
  } else {
    localStorage.setItem(
      'UAVListPage',
      JSON.stringify({
        date: dateRange.value,
        pageSize: pageSize.value,
        pageNum: pageNum.value
      })
    );
  }
  getUAVcheckList();
  getDate();

  window.addEventListener('beforeunload', clearStorage);
  window.addEventListener('unload', clearStorage); // 补充兼容性
});

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', clearStorage);
  window.removeEventListener('unload', clearStorage);
});

onUnmounted(() => {
  window.removeEventListener('beforeunload', clearStorage);
  window.removeEventListener('unload', clearStorage);
});
</script>

<style>
.header-content .el-upload-list {
  margin: 0 !important;
}

.header-content .el-input__wrapper {
  background-color: transparent !important;
}

.tech-container .el-row {
  height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.uploadUAV .el-dialog,
.uploadUAV .el-upload--picture-card,
.drawerUAV {
  background-color: #141414 !important;
  box-shadow: 0 0px 10px #aaa;
}
.uploadUAV .el-dialog__title,
.uploadUAV .el-upload--picture-card > i,
.drawerUAV .el-drawer__body {
  color: #fff !important;
}

.quill-editor {
  height: 500px !important;
}
</style>
<style scoped>
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.UAVinspection {
  min-height: 500px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.upload-btn ::v-deep .el-upload {
  display: block;
}

.date-picker ::v-deep .el-input__inner {
  background: rgba(64, 158, 255, 0.1);
  border: 1px solid rgba(64, 158, 255, 0.3);
  color: #66b1ff;
  width: 240px;
}

.btnRightClass {
  display: flex;
  justify-content: right;
}

.checkBox {
  width: 30px;
  height: 30px;
}

.checkText {
  color: #00ffaa;
  line-height: 30px;
  margin: 0 20px 0 10px;
}

.danger-btn {
  background: linear-gradient(45deg, #f56c6c, #c45656);
  border: 1px solid rgba(248, 152, 152, 0.3);
  color: #fff;
  transition: all 0.3s;
}

.export-btn,
.upload-btn ::v-deep .el-button {
  background: linear-gradient(45deg, #1a2840, #0d1a2f);
  border: 1px solid rgba(64, 158, 255, 0.3);
  color: #66b1ff;
  transition: all 0.3s;
}

.export-btn:hover,
.upload-btn ::v-deep .el-button:hover {
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
  transform: translateY(-2px);
}
.tech-container {
  position: absolute;
  width: 100%;
  padding: 30px;
  background: var(--gradient-bg);
  min-height: 100vh;
  z-index: 999;
  /* background: #111; */
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.title-gradient {
  font-size: 2.5em;
  background: linear-gradient(45deg, #409eff, #66b1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* font-weight: 600; */
  font-family: '庞门正道标题体免费版';
}

.sub-title {
  color: #66b1ff;
  letter-spacing: 4px;
  margin-top: 10px;
  font-family: fangsong;
}

.tech-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  position: relative;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}
.tech-card.unReady {
  background: rgba(250, 181.5, 181.5, 0.15);
  border: 1px solid rgba(250, 181.5, 181.5, 0.2);
}

.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(64, 158, 255, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  margin-right: 15px;
}

.icon-wrapper i {
  font-size: 24px;
  color: var(--primary-color);
}

.card-title {
  width: 100%;
  cursor: pointer;
}

.card-title h3 {
  color: #fff;
  margin-bottom: 5px;
  font-weight: 600;
}

.desc {
  color: #66b1ff;
  font-size: 0.9em;
}

.label {
  color: #66b1ff;
}

.value {
  color: #fff;
}

.value-badge {
  background: rgba(64, 158, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  color: #66b1ff;
}

.time-tag {
  /* position: absolute;
  bottom: 15px;
  right: 15px; */
  color: #66b1ff;
  font-size: 0.85em;
}

.status-tag {
  position: absolute;
  bottom: 10px;
  right: 20px;
  color: white;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 0.85em;
  background: rgba(250, 181.5, 181.5, 0.15);
  user-select: none;
}

@media (max-width: 768px) {
  .tech-container {
    padding: 15px;
  }
}

:root {
  --primary-color: #409eff;
  --gradient-bg: linear-gradient(135deg, #1a2840 0%, #0d1a2f 100%);
}

/* From Uiverse.io by SelfMadeSystem */
/*
More comprehensive version at shenanigans.shoghisimon.ca/collection/css-rain-bg/
 */

.containerBG::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 600px;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(1em) brightness(6);
  background-image: radial-gradient(circle at 50% 50%, #0000 0, #0000 2px, hsl(0 0 4%) 2px);
  background-size: 8px 8px;
}

.containerBG {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100vh;
  --c: #09f;
  background-color: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000), radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000), radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000), radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000), radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000), radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000), radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%), radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000), radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: hi 150s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }

  to {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}
.paginationBox {
  display: flex;
  justify-content: center;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: rgb(64, 158, 255, 0.5);
}

.formatted-text {
  white-space: pre-wrap; /* CSS3保留空白符序列，但是正常地进行换行 */
  word-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
}

.tabelLine {
  display: flex;
  justify-content: space-around;
  border: 1px solid #000;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
}

.tabelItem {
  border-right: 1px solid #000;
  width: 100%;
}
.tabelItem1 {
  border-right: 0;
}
.tabelLine1 {
  border-top: 0;
}
.imgLine {
  border: 1px solid #000;
}
.imgLine img {
  width: 60%;
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
}
</style>
/* 选择框样式开始 */
<style scoped>
.checkboxItem {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
}
.neon-checkbox {
  --primary: #00ffaa;
  --primary-dark: #00cc88;
  --primary-light: #88ffdd;
  --size: 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.neon-checkbox input {
  display: none;
}

.neon-checkbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.neon-checkbox__box {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  border: 2px solid var(--primary-dark);
  transition: all 0.4s ease;
}

.neon-checkbox__check-container {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neon-checkbox__check {
  width: 80%;
  height: 80%;
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-checkbox__glow {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: var(--primary);
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.2);
  transition: all 0.4s ease;
}

.neon-checkbox__borders {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
}

.neon-checkbox__borders span {
  position: absolute;
  width: 40px;
  height: 1px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.neon-checkbox__borders span:nth-child(1) {
  top: 0;
  left: -100%;
  animation: borderFlow1 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow2 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(3) {
  bottom: 0;
  right: -100%;
  animation: borderFlow3 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow4 2s linear infinite;
}

.neon-checkbox__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 6px var(--primary);
}

.neon-checkbox__rings {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.neon-checkbox__rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--primary);
  opacity: 0;
  transform: scale(0);
}

.neon-checkbox__sparks span {
  position: absolute;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0;
}

/* Hover Effects */
.neon-checkbox:hover .neon-checkbox__box {
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Checked State */
.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {
  border-color: var(--primary);
  background: rgba(0, 255, 170, 0.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check {
  stroke-dashoffset: 0;
  transform: scale(1.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow {
  opacity: 0.2;
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__borders span {
  opacity: 1;
}

/* Particle Animations */
.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__particles span {
  animation: particleExplosion 0.6s ease-out forwards;
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__rings .ring {
  animation: ringPulse 0.6s ease-out forwards;
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__sparks span {
  animation: sparkFlash 0.6s ease-out forwards;
}

/* Animations */
@keyframes borderFlow1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes borderFlow2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200%);
  }
}

@keyframes borderFlow3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

@keyframes borderFlow4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200%);
  }
}

@keyframes particleExplosion {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--x, 20px)), calc(-50% + var(--y, 20px))) scale(0);
    opacity: 0;
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes sparkFlash {
  0% {
    transform: rotate(var(--r, 0deg)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);
    opacity: 0;
  }
}

/* Particle Positions */
.neon-checkbox__particles span:nth-child(1) {
  --x: 25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(2) {
  --x: -25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(3) {
  --x: 25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(4) {
  --x: -25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(5) {
  --x: 35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(6) {
  --x: -35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(7) {
  --x: 0px;
  --y: 35px;
}
.neon-checkbox__particles span:nth-child(8) {
  --x: 0px;
  --y: -35px;
}
.neon-checkbox__particles span:nth-child(9) {
  --x: 20px;
  --y: -30px;
}
.neon-checkbox__particles span:nth-child(10) {
  --x: -20px;
  --y: 30px;
}
.neon-checkbox__particles span:nth-child(11) {
  --x: 30px;
  --y: 20px;
}
.neon-checkbox__particles span:nth-child(12) {
  --x: -30px;
  --y: -20px;
}

/* Spark Rotations */
.neon-checkbox__sparks span:nth-child(1) {
  --r: 0deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(2) {
  --r: 90deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(3) {
  --r: 180deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(4) {
  --r: 270deg;
  top: 50%;
  left: 50%;
}

/* Ring Delays */
.neon-checkbox__rings .ring:nth-child(1) {
  animation-delay: 0s;
}
.neon-checkbox__rings .ring:nth-child(2) {
  animation-delay: 0.1s;
}
.neon-checkbox__rings .ring:nth-child(3) {
  animation-delay: 0.2s;
}
/* 选择框样式结束 */

/* loading */

/* From Uiverse.io by ZacharyCrespin */
@keyframes square-animation {
  0% {
    left: 0;
    top: 0;
  }

  10.5% {
    left: 0;
    top: 0;
  }

  12.5% {
    left: 32px;
    top: 0;
  }

  23% {
    left: 32px;
    top: 0;
  }

  25% {
    left: 64px;
    top: 0;
  }

  35.5% {
    left: 64px;
    top: 0;
  }

  37.5% {
    left: 64px;
    top: 32px;
  }

  48% {
    left: 64px;
    top: 32px;
  }

  50% {
    left: 32px;
    top: 32px;
  }

  60.5% {
    left: 32px;
    top: 32px;
  }

  62.5% {
    left: 32px;
    top: 64px;
  }

  73% {
    left: 32px;
    top: 64px;
  }

  75% {
    left: 0;
    top: 64px;
  }

  85.5% {
    left: 0;
    top: 64px;
  }

  87.5% {
    left: 0;
    top: 32px;
  }

  98% {
    left: 0;
    top: 32px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

.loader {
  position: relative;
  width: 96px;
  height: 96px;
  transform: rotate(45deg) scale(0.8);
}

.loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 2px;
  border-radius: 0px;
  background: white;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  animation: square-animation 10s ease-in-out infinite both;
}

.loader-square:nth-of-type(0) {
  animation-delay: 0s;
}

.loader-square:nth-of-type(1) {
  animation-delay: -1.4285714286s;
}

.loader-square:nth-of-type(2) {
  animation-delay: -2.8571428571s;
}

.loader-square:nth-of-type(3) {
  animation-delay: -4.2857142857s;
}

.loader-square:nth-of-type(4) {
  animation-delay: -5.7142857143s;
}

.loader-square:nth-of-type(5) {
  animation-delay: -7.1428571429s;
}

.loader-square:nth-of-type(6) {
  animation-delay: -8.5714285714s;
}

.loader-square:nth-of-type(7) {
  animation-delay: -10s;
}
</style>
